<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>methods 方法选项</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>methods 方法选项</h1>
    <a href="../index.html">返回</a>
    <hr />
    <div id="app">
        {{num}}
        <hr />

        <button @click="add(2,$event)">vue 加1</button>

        <p>
            组件中 @click 是不能调用vue的methods 方法的，可以写成 @click.native 来调用

            <btn @click.native="add(2)" :btn-name="btnname"></btn>
        </p>

        <hr />

    </div>
    <p>
        作用域外调用方法: onclick="app.add(2)" [app就是vue实例，add是vue方法]<br />
        <button onclick="app.add(2)">构造器外执行的</button>
    </p>
    <hr />
    <button onclick="add()">js数值加1</button>
    <script type="text/javascript">
        function add() {
            app.num++;
        }
        var btn = {
            template: `<button >{{btnName}}</button>`,
            props: ['btnName']
        }
        var app = new Vue({
            el: "#app",
            data: {
                num: 1,
                btnname: "点击我啊"
            },
            components: {
                "btn": btn
            },
            methods: {
                add: function (num, v) {
                    console.log(v);
                    if (num != '') {
                        this.num += parseInt(num);
                    } else {
                        this.num++;
                    }
                }
            }
        })
    </script>
</body>

</html>